<script setup>
import { ref } from 'vue';

const items = ref([
    { title: 'Item 1' },
    { title: 'Item 2' },
    { title: 'Item 3' }
    // Add more items as needed
]);

const activeIndex = ref(-1);

function handleMouseOver(index) {
    activeIndex.value = index;
}

function handleMouseOut() {
    activeIndex.value = -1;
}
</script>

<template>
    <div class="accordion-grid">
        <div
            v-for="(item, index) in items"
            :key="index"
            class="grid-item"
            :class="{ active: activeIndex === index }"
            @mouseover="handleMouseOver(index)"
            @mouseout="handleMouseOut"
        >
            <div class="item-content">
                <!-- Item content goes here -->
                {{ item.title }}
            </div>
        </div>
    </div>
</template>
<style scoped>
.accordion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 10px;
}

.grid-item {
    border: 1px solid #ccc;
    padding: 10px;
    transition: all 0.3s ease;
}

.grid-item.active {
    transform: scale(1.1);
    z-index: 1;
}

.item-content {
    /* Additional styling for the item's content */
}
</style>
